<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂属性值示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div id="container"></div>

<script>
    // 定义一个复杂的对象
    const userInfo = {
        name: "Alice",
        age: 30,
        email: "alice@example.com",
        address: {
            street: "123 Main St",
            city: "Wonderland",
            zip: "12345"
        },
        hobbies: ["reading", "traveling", "coding"],
        isActive: true
    };

    // 将对象转换为 JSON 字符串
    const userInfoJSON = JSON.stringify(userInfo);

    // 使用模板字符串构建包含复杂属性值的 div 元素
    const complexDiv = `
            <div class="container" data-info='${userInfoJSON}'>
                <h2>用户信息</h2>
                <p><strong>姓名:</strong> ${userInfo.name}</p>
                <p><strong>年龄:</strong> ${userInfo.age}</p>
                <p><strong>邮箱:</strong> ${userInfo.email}</p>
                <p><strong>地址:</strong> ${userInfo.address.street}, ${userInfo.address.city}, ${userInfo.address.zip}</p>
                <p><strong>爱好:</strong> ${userInfo.hobbies.join(', ')}</p>
                <p><strong>活跃状态:</strong> ${userInfo.isActive ? '活跃' : '不活跃'}</p>
            </div>
        `;

    // 将生成的 HTML 插入到页面中
    document.getElementById('container').innerHTML = complexDiv;

    // 获取插入的 div 元素
    const container = document.querySelector('.container');

    // 从 data-info 属性中读取 JSON 字符串并解析为对象
    const storedUserInfoJSON = container.getAttribute('data-info');
    const storedUserInfo = JSON.parse(storedUserInfoJSON);

    // 显示解析后的对象内容
    console.log("解析后的用户信息:", storedUserInfo);
</script>
</body>
</html>


